<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/mui.min.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #demo {
            width: 300px;
            height: 300px;
            background: blue;
        }
    </style>
</head>

<body>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-grey mui-icon mui-icon-person" style="transform: translate(0px, 0px);"></a>
                <a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" style="transform: translate(-90px, 0px);"></a>
                <a class="mui-btn mui-btn-red mui-icon mui-icon-email" style="transform: translate(-180px, 0px);"></a>
            </div>
            <div class="mui-slider-handle" style="transform: translate(0px, 0px);">
                <div class="mui-table-cell">
                    左滑显示多功能菜单
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-grey mui-icon mui-icon-person" style="transform: translate(0px, 0px);"></a>
                <a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" style="transform: translate(-90px, 0px);"></a>
                <a class="mui-btn mui-btn-red mui-icon mui-icon-email" style="transform: translate(-180px, 0px);"></a>
            </div>
            <div class="mui-slider-handle" style="transform: translate(0px, 0px);">
                <div class="mui-table-cell">
                    左滑显示多功能菜单
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-grey mui-icon mui-icon-person" style="transform: translate(0px, 0px);"></a>
                <a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" style="transform: translate(-90px, 0px);"></a>
                <a class="mui-btn mui-btn-red mui-icon mui-icon-email" style="transform: translate(-180px, 0px);"></a>
            </div>
            <div class="mui-slider-handle" style="transform: translate(0px, 0px);">
                <div class="mui-table-cell">
                    左滑显示多功能菜单
                </div>
            </div>
        </li>
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled">
                <a class="mui-btn mui-btn-grey mui-icon mui-icon-person" style="transform: translate(0px, 0px);"></a>
                <a class="mui-btn mui-btn-yellow mui-icon mui-icon-phone" style="transform: translate(-90px, 0px);"></a>
                <a class="mui-btn mui-btn-red mui-icon mui-icon-email" style="transform: translate(-180px, 0px);"></a>
            </div>
            <div class="mui-slider-handle" style="transform: translate(0px, 0px);">
                <div class="mui-table-cell">
                    左滑显示多功能菜单
                </div>
            </div>
        </li>
    </ul>
    <script src="./js/mui.js"></script>
</body>

</html>